import React, { Component } from 'react';
import classnames from 'classnames';
import PropTypes from "prop-types";
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
import CSSModules from 'react-css-modules';

import styles from './Tabs.scss';

@immutableRenderDecorator
@CSSModules(styles, {allowMultiple: true})
export default class TabContent extends Component {

	static propTypes = {
		prefixClass: PropTypes.string,
		panels: PropTypes.object,
		activeIndex: PropTypes.number,
	}

  constructor(prop) {
    super(prop);
  }

  getTabContent() {
		const { prefixClass, panels, activeIndex } = this.props;
		const result = panels.map((child) => {
			if (!child) return;
			const isActive = activeIndex === child.props.index;
			return React.cloneElement(child, {
        prefixClass,
				children: child.props.children,
				isActive,
			})
		})
    return React.Children.toArray(result);
  }

  render() {
    const {
	    prefixClass,
    } = this.props;
    const classes = classnames({
      [`${prefixClass}-content`]: true,
    });
    return (
      <div styleName={classes}>
	      { this.getTabContent() }
      </div>
    );

  }

}
